//引入重置样式
require("../css/commCss/normalize.css");
//引入重置扩展样式
require("../css/commCss/reset.css");
//引入公共样式
require("../css/commCss/property.css");
//引入公共扩展样式
require("../css/commCss/basic.css");

//引入字体图标样式
require("../lib/font_3139541_zokbtoztf/iconfont.css");

//引入当前页面样式
require("../css/Trainingcourse.less");

//引入axios
const axios = require("axios");

//导入weui
require("weui");
const weui = require("weui.js");

//导入util
const util = require("../lib/util");

//文档加载事件
document.addEventListener("DOMContentLoaded", function () {
    //1.导入公共头部
    util.sportTopNav("Trainingcourse");

    //2.导入公共底部
    util.fixBottomNav("sport");

    //3.从后端获取所有的课程
    axios.get("http://139.9.177.51:8099/sports/allcourse").then(function (res) {
        // console.log(res.data.data);
        let data = res.data.data;
        //用filter筛选最新课程和普通课程
        let newcourse = data.filter(function (v) {
            return v.latest == 1;
        });
        let courseList = data.filter(function (v) {
            return v.latest == 0;
        });
        console.log(newcourse, courseList);

        //14号下午1:最新课程动态设置自定义属性
        // (// 在外层类名为new-course的盒子里设置自定义属性)是js中动态设置自定义属性是直接写datdset[cid]
        document.querySelector('#newCourse').dataset['cid'] = newcourse[0].courseId

        //4.渲染最新课程 单渲染  //拿到后台的数据后进行渲染到页面 
        //图片渲染
        document.querySelector('#imgurl').src = 'http://139.9.177.51:8099' + newcourse[0].imgurl
        //标题渲染
        document.querySelector('#title').textContent = newcourse[0].name
        //内容描述渲染
        document.querySelector('#desc').textContent = newcourse[0].desc

        //5:普通课程渲染  多渲染
        // (是在外层li里动态添加自定义属性cid,在结构里的时候是设置自定义属性直接data-属性名=${v.courseId}))
        let arr = courseList.map(function (v) {
            return `
        <li class="part br15 cw" data-cid=${v.courseId}>
            <img src="http://139.9.177.51:8099${v.imgurl} "alt="">
            <div class="tip">
                <h3 class="text f20">${v.name}</h3>
                <p class="content f14">${v.desc}</p>
            </div>
        </li>
        `
        })
        // console.log(arr);
        document.querySelector('#courseList').innerHTML = arr.join('')

    });

    //6:最新课程添加点击事件,跳转到对应的详情页面,(AB页面传递参数)
    document.querySelector('#newCourse').addEventListener('click', function () {

        //6.1获取自定义属性的值 this就是当前对象document.querySelector('#newCourse')
        let cid=this.dataset['cid']
        // console.log(cid);

        //6.2存储到会话存储,为了后面详情页面能拿到后台的数据,因为只是每次点击的时候,进入到详情页面,详情页面再到会话存储去拿数据,所以会话存储只是一个临时储存库,就相当于快递柜只是临时存储,只要你东西拿走了,他还可以存储其他东西,提高服务器的性能
        //简写   sessionStorage.setItem('cid')=cid,简写后面赋了值就是setItem的简写,没赋值就是读取
        sessionStorage.cid=cid

        //6.3跳转
        location.href='detail.html'
    })

    //7:普通课程注册点击事件,跳转到对应的普通课程的详情页(AB页面传递参数)
    document.querySelector('#courseList').addEventListener('click',function(e){

        //7.1获取自定义属性的值
        let cid=e.target.closest('li').dataset['cid']
        // console.log(cid);

        //7.2将普通课程的自定义属性cid(课程id)存储到会话存储
        sessionStorage.cid=cid

        //6.3跳转
        location.href='detail.html'
    })

});
